---
sidebar_position: 2
---

# useAnimatedStyle

`useAnimatedStyle` lets you create a styles object, similar to `StyleSheet` styles, which can be animated using [shared values](/docs/fundamentals/glossary#shared-value).

Styles defined using `useAnimatedStyle` have to be passed to `style` property of an [Animated component](/docs/fundamentals/glossary#animated-component). Styles are automatically updated whenever an associated shared value or React state changes.

In contrast to the [inline styling](/docs/fundamentals/glossary#animations-in-inline-styling), `useAnimatedStyle` allows to [access values stored in shared values](/docs/fundamentals/animating-styles-and-props/#animating-styles) in the styles object it defines.

For animating properties use [`useAnimatedProps`](/docs/core/useAnimatedProps) instead.

## Reference

```jsx
import { useAnimatedStyle } from 'react-native-reanimated';

function App() {
  // highlight-next-line
  const animatedStyles = useAnimatedStyle(() => {
    return {
      opacity: sv.value ? 1 : 0,
    };
    // highlight-next-line
  });

  // highlight-next-line
  return <Animated.View style={[styles.box, animatedStyles]} />;
}
```

<details>
<summary>Type definitions</summary>

```typescript
type DefaultStyle = ViewStyle | ImageStyle | TextStyle;
type DependencyList = Array<unknown> | undefined;

export function useAnimatedStyle<Style extends DefaultStyle>(
  updater: () => Style,
  dependencies?: DependencyList | null
): Style;
```

</details>

### Arguments

#### `updater`

A function returning an object with style properties you want to animate. You can animate any style property available in React Native.

#### `dependencies` <Optional/>

An optional array of dependencies.

Only relevant when using Reanimated [without the Babel plugin on the Web](https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support#web-without-the-babel-plugin).

## Returns

`useAnimatedStyle` returns an animated style object which has to be passed to the `style` property of an [Animated component](/docs/fundamentals/glossary#animated-component) that you want to animate.

`useAnimatedStyle` mimics the behavior of `StyleSheet` as much as possible. `updater` callback returns a value that looks like a regular style object in which you can also use shared values.

## Example

import AnimatingStyles from '@site/src/examples/AnimatingStyles';
import AnimatingStylesSrc from '!!raw-loader!@site/src/examples/AnimatingStyles';

<InteractiveExample
  src={AnimatingStylesSrc}
  component={<AnimatingStyles />}
  showCode
/>

## Remarks

- Mutating shared values in `useAnimatedStyle`'s callback is an undefined behavior which may lead to infinite loops.

<Indent>

```jsx
function App() {
  const sv = useSharedValue(0);
  const animatedStyles = useAnimatedStyle(() => {
    // highlight-next-line
    sv.value = withTiming(1); // Don't do this!
    return { opacity: sv.value };
  });
}
```

</Indent>

- You can apply the value returned from `useAnimatedStyle` only to `Animated` components. Passing the animated styles to non-animated component will result in an error.

- Only define the dynamic part of your styles with `useAnimatedStyle` and keep the static ones separately using `StyleSheet` API or (if you really have to) with inline styles. That way you avoid lots of unnecessary style recalculations. Static and dynamic styles can be easily merged using the `[]` syntax:

<Indent>

```jsx
function App() {
  const animatedStyles = useAnimatedStyle(() => ({
    offset: sv.value,
  }));

  // highlight-next-line
  return <Animated.View style={[styles.box, animatedStyles]} />;
}

const styles = StyleSheet.create({
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
  },
});
```

</Indent>

- You can share animated styles between components to avoid code duplication.

- The callback passed to the `useAnimatedStyle` is first run on the [JavaScript thread](/docs/fundamentals/glossary#javascript-thread) and immediately after on the [UI thread](/docs/fundamentals/glossary#ui-thread). This may cause an error if you write your code as if it's running on UI thread only. To avoid this, you can use the `global._WORKLET` variable to check if the code is running on the UI thread:

<Indent>

```jsx
function App() {
  const animatedStyles = useAnimatedStyle(() => {
    // highlight-next-line
    if (global._WORKLET) {
      // UI thread only code
    } else {
      // JS thread fallback code
    }
  });
}
```

</Indent>

## Platform compatibility

<div className="platform-compatibility">

| Android | iOS | Web |
| ------- | --- | --- |
| ✅      | ✅  | ✅  |

</div>
